/*

*Origonal Author:                  Marco Kuiper (http://www.marcofolio.net/)
*Modified for Jeslegaspi.com by    Eric Jones
*/



// Speed of the automatic slideshow

var slideshowSpeed = 4000;

// Variable to store the images we need to set as background
// which also includes some text and url's.

var photos = [ {
	
		"title" : "These options can be set and text will display if stuff is not commented out below",
		"image" : "slideshow/DSC_0128.jpg",
		"url" : "",
		"firstline" : "",
		"secondline" : ""

	}, {
		"title" : "",
		"image" : "slideshow/DSC_3405_2texture.jpg",
		"url" : "",
		"firstline" : "",
		"secondline" : ""

	}, {

		"title" : "",
		"image" : "slideshow/DSC_4197.jpg",
		"url" : "",
		"firstline" : "",
		"secondline" : ""

	}, {

		"title" : "",
		"image" : "slideshow/DSC_9364texture.jpg",
		"url" : "",
		"firstline" : "",
		"secondline" : ""

	}

];







$(document).ready(function() {

		

	// Backwards navigation

	$("#back").click(function() {

		stopAnimation();
		navigate("back");
	});

	

	// Forward navigation

	$("#next").click(function() {

		stopAnimation();
		navigate("next");
	});

	

	var interval;
	$("#pauseplay").toggle(function(){
		stopAnimation();

	}, function() {

		// Change the background image to "pause"
		//$(this).css({ "background-image" : "url(images/btn_pause.png)" });

		// Show the next image

		navigate("next");

		// Start playing the animation

		interval = setInterval(function() {

			navigate("next");
		}, slideshowSpeed);

	});

	

	

	var activeContainer = 1;	
	var currentImg = 0;
	var animating = false;
	var navigate = function(direction) {

		// Check if no animation is running. If it is, prevent the action

		if(animating) {

			return;

		}

		

		// Check which current image we need to show

		if(direction == "next") {
			currentImg++;
			if(currentImg == photos.length + 1) {
				currentImg = 1;

			}

		} else {
			currentImg--;
			if(currentImg == 0) {
				currentImg = photos.length;}}

		

		// Check which container we need to use

		var currentContainer = activeContainer;
		if(activeContainer == 1) {
			activeContainer = 2;

		} else {

			activeContainer = 1;
			}

		showImage(photos[currentImg - 1], currentContainer, activeContainer);
		};

	

	var currentZindex = -1;
	var currentCamZindex= 2000;
	
	//   +---------------------------------------------------+
	//   |  In order for the Cam IMG to change just like     |
	//   | the background image does (changing the image     |
	//   | hidden beneeth the top image and then fading      |
	//   | out the top image and so on, we had to start      |
	//   | the Cam Image off at a really high Z-index so     |
	//   | that it can continue to decrement but never go    |
	//   | behind anything.                                  | 
	//   +---------------------------------------------------+
	
	
	//Now that the Cam Image is 2000 steps in the forground, we want
	//the elements that were above it to stay above it.
	
	$("#screenDisplay").css({"z-index" : (currentCamZindex + 1)});
	$("#toplayerfilm").css({"z-index" : (currentCamZindex + 2)});
	
var showImage = function(photoObject, currentContainer, activeContainer) {

		animating = true;
	

// And now our Z-Indexes will begin their infinate decrement...Make sure the new container is always on the background:

        currentZindex--;
		currentCamZindex--;


	
	
	
	
		// Set the background image of the new active container
		
	

		

		$("#camIMG_slot" + activeContainer).css({
			"background-image" : "url(images/" + photoObject.image + ")",
			"display" : "block",
			"z-index" : currentCamZindex
		});

		

		$("#bgIMG_slot" + activeContainer).css({
			"background-image" : "url(images/" + photoObject.image + ")",
			"display" : "block",
			"z-index" : currentZindex
		});


//------------------Start Text Feature---------------------//
		
		// +------------------------------------------------+
		// |  Cool Animated Text was built                  |
		// |  into the origonal script. I commented         |      
		// |  it out rather than removing it so             |   
		// |  that it can me added to images if wanted      |                                   
		// |  Just make sure the css is setup for it        | 
		// +------------------------------------------------+

		// Hide the header text

		//$("#headertxt").css({"display" : "none"});

		

		// Set the new header text

		//$("#firstline").html(photoObject.firstline);

		//$("#secondline")

			//.attr("href", photoObject.url)

			//.html(photoObject.secondline);

		//$("#pictureduri")

			//.attr("href", photoObject.url)

			//.html(photoObject.title);

// ----------------------End of text Feature ----------------//		

		

// Fade out the current container
// and display the header text when animation is complete

		
		$("#camIMG_slot" + currentContainer).fadeOut(1200,function() {
			setTimeout(function() {
				$("#headertxt").css({"display" : "block"});
				animating = false;
			}, 500);
		});

		

		

		$("#bgIMG_slot" + currentContainer).fadeOut(1200,function() {
			setTimeout(function() {
				$("#headertxt").css({"display" : "block"});
				animating = false;
			}, 500);
		});

		

	};  // <---what is this for??

	

	var stopAnimation = function() {

		

		// Clear the interval
		clearInterval(interval);
	};

	// We should statically set the first image

	navigate("next");

	// Start playing the animation

	interval = setInterval(function() {

		navigate("next");

	}, slideshowSpeed);

	

});